<template>
    <div class="viewport">
        <!-- <div class="row">
            <div class="col-lg-12 text-right">
                <button class="btn btn-primary"> 新 增 </button>
                <input type="text" class="form-control" v-model="test" @keypress.enter="testin">
            </div>
        </div> -->
        <div class="noprint">
            <div class="row">
            <div class="col-lg-12">
                <blockquote>
                    <div>
                        <p class="text-primary inline-block-p">
                            订单
                        </p>
                        <div class="blockquote-form">
                            <button class="btn btn-warning" @click="getNewOrder(true)" :class="{'flash':has_new_order,'animated':has_new_order,'infinite':has_new_order}">查看新订单</button>
                            
                        </div>
                    </div>
    
                </blockquote>
            </div>
        </div>
        <div class="row form-horizontal">
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label">指定用户</label>
                    <div class="col-sm-8">
                        <input type="text" class=" form-control" v-model="username" placeholder="不填时为搜索全部用户">
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <button class="btn btn-primary" @click="getList()">按条件搜索</button>
                </div>
            </div>
        </div>
        <div class="row form-horizontal">
            

            <div class="col-lg-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label">订单状态</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" value="0,1,2,3,4,5,6,7" v-model="state"> 全部(含未付款)
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value="0" v-model="state"> 未付款的
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value="1" v-model="state"> 待接单
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value="2" v-model="state"> 待分配
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value="3" v-model="state"> 送货员已接
                        </label>
                        <label class="radio-inline">
                            <input type="radio"  value="4" v-model="state"> 送货中
                        </label>
                        <label class="radio-inline"> 
                            <input type="radio"  value="5" v-model="state"> 待完成
                        </label>
                        <label class="radio-inline"> 
                            <input type="radio"  value="6" v-model="state"> 已完成
                        </label>
                        <label class="radio-inline"> 
                            <input type="radio"  value="7" v-model="state"> 退回的
                        </label>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label">到达小区时间</label>
                    <div class="col-sm-8">
                        <select class="form-control" v-model="time_str">
                            <option value="all">全部时间</option>
                            <option value="self">自提</option>
                            <template v-for="(item,i) in times">
                                <option :value="item" :key="i">{{item | timeStr}}</option>
                            </template>
                        </select>
                    </div>
                </div>
            </div>
            
            
            
        </div>
  

        <div class="row">
                <div class="col-lg-12">
                    <div class="flex-list table-style table-striped-style">
                        <div class="flex-row title-row">
                            <div class="flex-2 flex-col">订单号</div>
                            <div class="flex-2 flex-col">预定到达时间</div>
                            <div class="flex-2 flex-col">订单菜品</div>
                            <div class="flex-2 flex-col">客户名</div>
                            <div class="flex-2 flex-col">订单备注</div>
                            <div class="flex-1 flex-col text-warning">状态</div>
                            <div class="flex-4 flex-col">操作</div>
                        </div>
                        <div class="flex-list-body">
                            <template v-for="item in list">
                                <div class="flex-row" :key="item.id" v-show="time_search=='all'||item.booksingTime==time_search">
                                    <div class="flex-2 flex-col">{{item.receiptCode}}</div>
                                    <div class="flex-2 flex-col">{{item | booksingTimeStr}}</div>
                                    <div class="flex-2 flex-col">
                                        <div class="row">
                                            <div class="col-lg-12" v-for="(cai,c) in item.details" :key="cai.id">
                                                {{c+1}}.{{cai.name}} x {{cai.qty}}
                                            </div>
                                            <div class="col-lg-12">总金额:{{item.totalMoney}}</div>
                                        </div>
                                    </div>
                                    <div class="flex-2 flex-col">{{item.userInfo.name | usernameStr}}</div>
                                    <div class="flex-2 flex-col">{{item.remark?item.remark:'无'}}</div>
                                    <div class="flex-1 flex-col text-warning">{{item.currentState | stateStr}}</div>
                                    <div class="flex-4 flex-col">
                                        <button class="btn btn-primary" @click="p(item)">打印订单</button>
                                        <button class="btn btn-primary" @click="tookOrder(item)" v-if="item.currentState=='1'">接单</button>
                                        <button class="btn btn-info" @click="openSend(item)" v-if="item.currentState=='2'">派单</button>
                                        <button class="btn btn-danger" @click="comOrder(item)" v-if="item.currentState=='5'||(item.currentState=='2'&&item.isSendToHome!='1')">完成订单</button>
                                        <button class="btn btn-danger" @click="comOrder(item)" v-if="item.userInfo.name=='15802764594'||item.userInfo.name=='15926386906'">完成订单</button>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="righttab-table-page clearfix">
                            <Paging v-model="pn" :total="total" :ps="ps"></Paging>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
            

        <SendOrderModal :data-obj="curr_item" :open="send_open" @donesend="doneSend" @close="closeSend"></SendOrderModal>
    </div>
</template>
<script>
    import SendOrderModal from '../components/order/SendOrderModal.vue'
    import ViewOrderModal from '../components/order/ViewOrderModal.vue'
    import {tip,ajax} from '../tools/tools.js'
    import Paging from '../components/Paging.vue'
    import _ from 'lodash'

    export default {
        components: {
            SendOrderModal,
            ViewOrderModal,
            Paging
        },
        data() {
            return {
                userphone:'',

                myint:null,
                has_new_order:false,

                username:'',
                state:'1',
                sign_id:'',

                time_str:'all',
                time_search:'all',
                times:[
                    't-10:00',
                    't-11:00',
                    't-12:00',
                    't-16:00',
                    't-17:00',
                    't-18:00',
                    't-19:00',

                    'm-10:00',
                    'm-11:00',
                    'm-12:00',
                    'm-16:00',
                    'm-17:00',
                    'm-18:00',
                    'm-19:00'
                ],

                pn:1,
                ps:30,
                total:0,

                curr_item:null,
                p_item:null,

                deliverys:[
                    {
                        id:'326c3529e00711e78b5600163e0adb3f',
                        name:'deliveryman1',
                        str:'送货员1'
                    },
                    {
                        id:'47d72449e00711e78b5600163e0adb3f',
                        name:'deliveryman2',
                        str:'送货员2'
                    },
                    {
                        id:'5fb48017e00711e78b5600163e0adb3f',
                        name:'deliveryman3',
                        str:'送货员3'
                    }
                ],

                send_open:false,

                list:[]
            }
        },
        watch: {
            time_str(v,ov){
                var self = this;
                if(v=='all'||v=='self'){
                    self.time_search = v;
                }else{
                    self.time_search = self.getDayStr(v);
                }
            },
            state(v,ov){
                var self = this;
                if(self.pn==1){
                    this.getList();
                } else {
                    self.pn = 1;
                }
            },
            pn(v,ov){
                this.getList();
            }
        },
        filters:{
            stateStr(v){
                // 0 未付款 1 付款了 2 接单 3 派单 4 送货接货 5 送到小区 6 确认收货 7 退回
                var sObj = {
                    '0':'未付款',
                    '1':'付款了',
                    '2':'接单',
                    '3':'派单',
                    '4':'送货接货',
                    '5':'送到小区',
                    '6':'确认收货',
                    '7':'退回'
                }

                return sObj[v];
            },
            timeStr(v){
                var d_arr = v.split('-');
                var offset = 0;
                if(d_arr[0]=='m'){
                    offset = 1;
                } else {
                    offset = 0;
                }

                
                var o = offset*1000*60*60*24;

                var t = new Date().getTime();

                var d = new Date(t+o);

                var y = d.getFullYear();
                var m = (d.getMonth()+1)>9?(d.getMonth()+1).toString():('0'+(d.getMonth()+1));
                var day = d.getDate()>9?d.getDate().toString():('0'+d.getDate());
                
                return y+'-'+m+'-'+day + ' '+d_arr[1]+':00';
            },
            booksingTimeStr(v){
                var t = '';
                if(v.booksingTime=='self'){
                    t = '自提 付款时间' + new Date(v.payTime).toLocaleString();
                } else {
                    t = v.booksingTime;
                }
                return t;
            },
            usernameStr(v){
                if(v=='15926386906'||v=='15802764594'){
                    return '这是周劼的不要管'
                }
                return v;
            }
        },
        methods: {
            getDayStr(v){
                var d_arr = v.split('-');
                var offset = 0;
                if(d_arr[0]=='m'){
                    offset = 1;
                } else {
                    offset = 0;
                }

                
                var o = offset*1000*60*60*24;

                var t = new Date().getTime();

                var d = new Date(t+o);

                var y = d.getFullYear();
                var m = (d.getMonth()+1)>9?(d.getMonth()+1).toString():('0'+(d.getMonth()+1));
                var day = d.getDate()>9?d.getDate().toString():('0'+d.getDate());
                
                return y+'-'+m+'-'+day + ' '+d_arr[1]+':00';
            },
            
            getList(par){
                var self = this;
                var param = par?par:{};
                param.token = localStorage.token;
                param.currentState = self.state;
                param.pageSize = self.ps;
                param.pageNum = self.pn;
                if(self.username.trim().length>0){
                    param.userName = self.username;
                    param.pageNum = 1;
                    if(self.pn!=1){
                        self.pn = 1;
                        return;
                    }
                }
                
                ajax.getOrderList({
                    param,
                    cb(data){
                        self.list = data.datalist?data.datalist.map((v,i)=>{
                            if(v.isSendToHome=='0'){
                                v.booksingTime = 'self';
                            }
                            return v
                        }):[];
                        self.total = data.result==null?0:parseInt(data.result);
                        self.list = _.sortBy(self.list,function(o){
                            return o.booksingTime;
                        })
                    }
                });
            },

            getNewOrder(update){
                var self = this;
                ajax.getOrderList({
                    param:{
                        token:localStorage.token,
                        currentState:'1'
                    },
                    cb(data){
                        if(data.datalist){
                            self.has_new_order = true;
                        } else {
                            self.has_new_order = false;
                        }

                        if(update){
                           self.state = '1';
                           self.username = '';
                           self.getList();
                        }
                    }
                });
            },

            tookOrder(v){

                var self = this;
                var state = '2';
                if(v.isSendToHome=='0'){
                    state = '5';
                }
                ajax.updateOrderState({
                    type:'post',
                    param:{
                        id:v.id,
                        state,
                        token:localStorage.token
                    },
                    cb(data){
                        // console.log(data);
                        self.getList();
                    }
                })
            },

            comOrder(v){
                var self = this;
                var state = '6';
                if(confirm('是否确认完成订单')){
                    ajax.updateOrderState({
                        type:'post',
                        param:{
                            id:v.id,
                            state,
                            token:localStorage.token
                        },
                        cb(data){
                            // console.log(data);
                            self.getList();
                        }
                    })
                }
                
            },

            p(v){
                // $('.noprint').addClass('hide')
                // this.p_item = v;
                var list = v.details.map((g,i)=>{
                    var obj = {};
                    obj.n = escape(g.name);
                    obj.q = g.qty;
                    obj.p = v.transactionMethod!='3'?g.price:g.preferentialPrice;
                    
                    return obj;
                })

                var info = {};
                info.ish = v.isSendToHome;
                info.t = v.totalMoney;
                info.n = v.userInfo.name;

                var address = {areas:'',house:''}
                try{
                    address = JSON.parse(v.erpressBoxAddress);
                }catch(e){
                    address.house = v.erpressBoxAddress?v.erpressBoxAddress.replace('&',''):'';
                }
                var address_str = address.areas+address.house;

                info.a = escape(address_str);
                info.b = v.booksingTime;
                info.m = escape(v.remark?v.remark:'无');
                
                var l = JSON.stringify(list);
                var i = JSON.stringify(info);

                window.open('../public/test.html?l='+l+'&i='+i);
                // setTimeout(function(){
                //     window.print();
                // },1000);
            },
            closep(){
                // $('.noprint').removeClass('hide')
                // this.p_item = null;
            },

            openSend(v){
                var self = this;
                self.curr_item = v;
                self.send_open = true;
            },

            closeSend(){
                var self = this;
                self.curr_item = null;
                self.send_open = false;
            },

            doneSend(){
                var self = this;
                self.closeSend();
                self.getList();
            },

            
            getUserInfo(){
                var self = this;
                ajax.getUserInfo({
                    type:'post',
                    param:{
                        token:localStorage.token,
                        phone:self.userphone
                    },
                    cb(data){
                        console.log(data);
                    }
                })
            }
        },
        beforeDestroy(){
            var self = this;
            clearInterval(self.myint);
            self.myint = null;
        },
        mounted(){
            var self = this;
            this.getList();
            this.myint = setInterval(function(){
                self.getNewOrder();
            },60000)
 
            
        }
    }
</script>
<style scoped>
.blockquote-form .form-group {
    margin-bottom: 0px;
    font-size: 13px;
}

.inline-block-p {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 30px;
}

.blockquote-form {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.small-text span {
    font-size: 70%;
}

.sort-col{
    cursor: pointer;
}

.print-layout{
    position: fixed;
    z-index: 10000;
    top: 0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: #fff;
}
</style>